<template>
  <el-container class="container">
    <el-aside class="aside" width="250px">
      <div class="navBar">
        <span>菜单栏</span>
      </div>
      <el-menu
        style="width: 100%"
        background-color="#36475D"
        text-color="#fff"
        active-text-color="#38C5EF"
        :default-active="$route.path"
        router
      >
        <NavMenu ref="NavMenu" :navMenus="allmenu.children"></NavMenu>
        <!-- <el-submenu index="1">
                        <template slot="title">
                            <i class="iconfont icon-xitongguanli"></i>
                            <span class="gap">系统管理</span>
                        </template>
                        <el-menu-item index="/home/jurisdiction"><i class="iconfont icon-quanxian"></i><span class="gap">权限管理</span></el-menu-item>
                        <el-menu-item index="/home/role"><i class="iconfont icon-role"></i><span class="gap">角色管理</span></el-menu-item>
                        <el-menu-item index="/home/adminUser"><i class="iconfont icon-yonghu"></i><span class="gap">管理员用户管理</span></el-menu-item>
                        <el-menu-item index="/home/commonUser"><i class="iconfont icon-yonghu"></i><span class="gap">普通用户管理</span></el-menu-item>
                        <el-menu-item index="/home/menuManagement"><i class="iconfont icon-caidan"></i><span class="gap">菜单管理</span></el-menu-item>
                        <el-submenu index="1-4">
                            <template slot="title"><i class="iconfont icon-APPguanli"></i><span class="gap">app管理</span></template>
                            <el-menu-item index="/home/versionManagement"><i class="iconfont icon-banbenxinxi"></i><span class="gap">版本管理</span></el-menu-item>
                        </el-submenu>
        </el-submenu>-->
      </el-menu>
      <div class="fold-icon">
        <div class="wrapper">
            <div class="top-sj"></div>
            <div class="middle"></div>
            <div class="icon"><</div>
            <div class="bottom-sj"></div>
        </div>
      </div>
    </el-aside>
    <el-main class="main">
      <el-row style="margin-bottom: 10px;">
        <el-col align="right">
          <el-dropdown @command="handleCommand">
            <div style="display: flex;align-items:center">
              <img width="31px" src="../assets/img/admin12.png" />
              <a>{{user.account}}</a>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout" divided>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <el-row>
        <el-tabs
          class="nav-tab"
          v-model="activeIndex"
          type="border-card"
          closable
          v-if="openTab.length"
          @tab-click="tabClick"
          @tab-remove="tabRemove"
        >
          <el-tab-pane
            :key="item.index"
            v-for="(item, index) in openTab"
            :label="item.name"
            :name="item.route"
          ></el-tab-pane>
        </el-tabs>
      </el-row>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
import $ from "jquery";

export default {
  name: "index",
  components: {
    NavMenu: () => import("@/components/NavMenu.vue")
  },
  data() {
    return {
      user: {},
      allmenu: {}
    };
  },
  watch: {
    $route(to, from) {
      //判断路由是否已经打开
      //已经打开的 ，将其置为active
      //未打开的，将其放入队列里
      console.log("to", to);
      console.log("from", from);
      var isContain = false;
      for (var i in this.openTab) {
        if (this.openTab[i].route == to.path) {
          this.$store.commit("set_active_index", to.path);
          isContain = true;
          break;
        }
      }
      if (!isContain) {
        this.$store.commit("set_active_index", to.path);
        this.$store.commit("add_tabs", { name: to.name, route: to.path });
      }
    }
  },
  mounted() {
    $(".icon").hover(function(){
        $(".aside").animate({width: 0}, 1000);
    }, function(){
        $(".aside").animate({width: "250px"}, 1000);
    });
    // //在页面加载时读取sessionStorage里的状态信息
    // if (sessionStorage.getItem("openTab") ) {
    //     // this.$store.replaceState(Object.assign({}, this.$store.state.openTab,JSON.parse(sessionStorage.getItem("openTab"))))
    //     this.openTab = JSON.parse(sessionStorage.getItem("openTab"))
    // }
  },
  created() {
    console.log("index组件创建");
    console.log(this.openTab);
    this.user = JSON.parse(localStorage.getItem("user"));
    this.allmenu.children = JSON.parse(localStorage.getItem("menus"));
    console.log("user", this.user);
    var isContain = false;
    for (var i in this.openTab) {
      if (this.openTab[i].route == this.$route.path) {
        // this.$store.commit("set_active_index", to.path);
        isContain = true;
        break;
      }
    }
    if (!isContain) {
      this.$store.commit("add_tabs", {
        route: "/index/home",
        name: "首页"
      });
    }
    this.$store.commit("set_active_index", this.$route.path);
    // //在页面刷新时将vuex里的信息保存到sessionStorage里
    // window.addEventListener("beforeunload",()=>{
    //     sessionStorage.setItem("openTab",JSON.stringify(this.$store.state.openTab))
    // })
  },
  computed: {
    openTab() {
      return this.$store.state.openTab;
    },
    activeIndex: {
      get() {
        return this.$store.state.activeIndex;
      },
      set(val) {
        this.$store.commit("set_active_index", val);
      }
    }
  },
  methods: {
    //点击退出
    handleCommand(commond) {
      if (commond == "logout") {
        this.$emit("logout");
      }
    },
    //tab点击
    tabClick() {
      this.$router.push(this.activeIndex);
      this.$store.commit("set_active_index", this.activeIndex);
    },
    //tab移除
    tabRemove(index) {
      console.log("移除tab", index);
      if (index == "/index/home") {
        this.$message({
          type: "warning",
          message: "首页不能删除"
        });
        return;
      }
      this.$store.commit("remove_tabs", index);
      if (this.activeIndex == index) {
        this.$store.commit("set_active_index", this.openTab.pop().route);
        this.$router.push({
          path: this.activeIndex
        });
      }
    }
  }
};
</script>

<style lang="less">
.container {
  height: 100%;
  .gap {
    margin-left: 10px;
  }
  .nav-tab .el-tabs__content {
    display: none;
  }
  .aside {
    position: relative;
    overflow-x: hidden;
    background-color: #36475d;
    .navBar {
      padding: 15px;
      text-align: center;
      font-size: 18px;
      border-bottom: 5px solid #38c5ef;
      color: #fff;
    }
    .main {
      height: 100%;
    }
    .fold-icon {
    //   background-color: green;
      position: absolute;
      top: 50%;
      right: 0;
      z-index: 999;
      .wrapper{
          position: relative;
          height: 110px;
          width: 20px;
          cursor: pointer;
      }
      .top-sj {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        border-width: 20px;
        border-style: solid;
        border-color: transparent #000000 transparent transparent;
      }
      .middle{
          position: absolute;
          top:20px;
          right:0px;
          width: 20px;
          height: 70px;
          background-color: #000000;
          
      }
      .bottom-sj {
        position: absolute;
        top:70px;
        right:0px;
        width: 0;
        height: 0;
        border-width: 20px;
        border-style: solid;
        border-color: transparent #000000 transparent transparent;
      }
      .icon{
          position: absolute;
          top: 44px;
          right: 5px;
          color: #36475d;
      }
      .icon:hover{
          color: #fff;
      }
    }
  }
}
</style>